<template>
	<view :style="{'--bgcolor':pageData.bgColor,'--color':color}">
		<!-- 样式三 -->
		<view v-if="pageData.style == 3" :style="{backgroundColor:pageData.bgColor}">
			<view class="p-bot30 p-left8 p-right8">
				<u-tabs :list="list" :activeStyle="{color}" lineWidth="20" :lineColor="color" keyName="classify_name" @click="click"></u-tabs>
			</view>
			<view class="slide d-flex p-left30" v-if="list.length">
				<view class="item m-right30 p-re" v-for="(item,index) in list[current].goods" :key="index" @click="toGoods(item.goods_id)">
					<text class="iconfont size28 p-ab" :class="item.goods_collect ? 'icon-guanzhu3' : 'icon-guanzhu1'" @click.stop="handleCollect(item)"></text>
					<image :src="$imgUrls(item.img)" mode="aspectFill" :class="['img', {'shadow':pageData.shadow==1}]"></image>
					<view class="mask2" v-if="!item.stock"></view>
					<image src="https://sra.mogoie.com/Uploads/diy/img/sold.png" class="sold" v-if="!item.stock"></image>
					<view class="d-flex j-sb a-center p-top20 m-bot20">
						<view class="size30 black bold300 ellipsis">{{item.name}}</view>
						<view class="iconfont size40 bold500" :class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"
							:style="{color: pageData.btnColor || '#E90B08'}"></view>
					</view>
					<view class="p-bot20">
						<text class="size28" :style="{color: pageData.priceColor || '#E90B08'}">￥{{parseFloat(item.price)}}</text>
						<text class="h6 color_77 bold300" v-if="item.unit">/{{ item.unit }}</text>
					</view>
				</view>
			</view>
		</view>

		<view :class="{'d-flex':pageData.style==2}" v-else>
			<!-- 顶部菜单 -->
			<view class="rows p-top20 p-bot10" :style="{backgroundColor:pageData.bgColor}" v-if="pageData.style==1">
				<u-tabs :list="list" :activeStyle="{color}" lineWidth="20" :lineColor="color"
					:scrollable="false" keyName="classify_name" @click="click"></u-tabs>
			</view>
			<!-- 左侧菜单 -->
			<view class="side" :style="{backgroundColor:pageData.bgColor}" v-if="pageData.style==2">
				<view v-for="(item,index) in list" :key="index" @click="handleClick(index)">
					<view :class="['tab', {'on': index == current}]">
						{{item.classify_name}}
					</view>
				</view>
			</view>
			
			<view class="content" v-if="list.length">
				
				<view class="row bgwhite bor_radius_10 m-bot20 p-re" :class="{'shadow':pageData.shadow==1}"
					v-for="(item,index) in list[current].goods" :key="index" @click="toGoods(item.goods_id)" v-if="index < pageData.count || show">
					<image :src="$imgUrls(item.img)" mode="aspectFill" class="list_imgs bor_radius_left10"></image>
					<view class="mask1" v-if="!item.stock"></view>
					<image src="https://sra.mogoie.com/Uploads/diy/img/sold.png" class="sold1" v-if="!item.stock"></image>
					<view class="flex-1 m-left20 p-right20 d-flex j-sb f-column">
						<view class="rows m-top20">
							<text class="black size32 ellipsis bold300">{{item.name}}</text>
							<text class="color_77 size28 m-top20 ellipsis_2 bold300">{{item.info}}</text>
						</view>
						<view class="row j-sb a-center m-bot20">
							<view>
								<text class="size26" :style="{color: pageData.priceColor || '#E90B08'}">￥</text>
								<text class="size34 bold500" :style="{color: pageData.priceColor || '#E90B08'}">{{parseFloat(item.price)}}</text>
								<text class="h6 color_77 bold300" v-if="item.unit">/{{ item.unit }}</text>
								<!-- <text class="size26 line-through color_C0 m-left10">￥{{parseFloat(item.full_price)}}</text> -->
							</view>
							<view class="iconfont size42 bold500" :class="pageData.btnName ? pageData.btnName : 'icon-gouwuche2'"
								:style="{color: pageData.btnColor || '#E90B08'}"></view>
						</view>
					</view>
				</view>

				<view class="size26 color_66 text-center p-top10" v-if="pageData.count < list[current].goods.length && !show" style="cursor: pointer;"
					@click="getTotal">查看全部</view>
				
				<emptys v-if="!list[current].goods.length" :top="10"></emptys>		
				
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		name:'tabs',
		props: ['pageData'],
		data() {
			return {
				list:[],
				current:0,
				// 控制"查看全部"和超出显示个数商品的显示隐藏
				show: false
			}
		},
		mounted() {
			this.getBlockInfo();
		},
		methods: {
			...mapMutations(['setHome']),
			async getBlockInfo(){
				const result = await this.$getBlockInfo(this.pageData.list);
				if(!result.list.length) return;
				this.list = result.list || [];
			},
			click(e){
				this.current = e.index;
			},
			handleClick(index){
				this.current = index
			},
			getTotal(){
				this.show = true
			},
			handleCollect({goods_id}){ // 收藏
				if (!this.vid) return this.setHome({showMode: true})
				this.$http.post({
					url: '/singleSaleApi/goods_collect',
					data: {
						goods_id
					}
				}).then(res=>{
					if(res.code != 200) return this.$Toast(res.msg)
					this.getBlockInfo()
				})
			},
			toGoods(id){
				let path = '/pages/goods/goods_detail?isHome=1&goodsid=' + id
				if(this.pageData.mode == 1) path = path + '&mode=1'
				if(this.pageData.mode == 2) path = path + '&mode=1&scan=1'
				this.toUrl(path)
			}
		},
		computed:{
			...mapState(['color','vid'])
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width:100%;
		padding:30rpx;
		background-color: var(--bgcolor);
	}
	.list_imgs,.mask1{
		width:242rpx;
		height: 242rpx;
	}
	.mask1,.mask2 {
		background: rgba(0,0,0,0.4);
		position: absolute;
		top: 0;
		left: 0;
	}
	.sold1{
		width: 148rpx;
		height: 148rpx;
		position: absolute;
		top: 50%;
		margin-top: -74rpx;
		left: 47rpx;
	}
	.side {
		width: 164rpx;
		.tab {
			width: 100%;
		    line-height: 120rpx;
		    text-align: right;
			font-size: 30rpx;
			color: #333;
			position: relative;
			&.on {
				color: var(--color);
				&:after{
					content: '';
					position: absolute;
					width: 6rpx;
					height: 50rpx;
					background: var(--color);
					bottom: 35rpx;
					left: 0;
				}
			}
		}
	}
	.shadow {
		box-shadow: 0 2px 4px rgba(0,0,0,.06);
	}
	.slide {
		overflow-x: scroll;
		.item {
			width: 280rpx;
			.img,.mask2 {
				width: 280rpx;
				height: 436rpx;
			}
			.sold {
				width: 148rpx;
				height: 148rpx;
				position: absolute;
				left: 50%;
				margin-left: -74rpx;
				top: 144rpx;
			}
			.icon-guanzhu1,.icon-guanzhu3 {
				top: 20rpx;
				left: 20rpx;
				color: var(--color);
				z-index: 10;
			}
		}
	}
</style>